---
description: Компонент для выбора диапазона дат, позволяет пользователю выбрать начальную и конечную даты в календаре.
---

<Overview group="dates">

# CalendarRange [tag:component]

Компонент для выбора диапазона дат, позволяет пользователю выбрать начальную и конечную даты в календаре.
Компонент отображает два месяца одновременно для удобства выбора длинных диапазонов.

</Overview>

<Playground>
  ```jsx
  <CalendarRange defaultValue={[new Date(2024, 2, 1), new Date(2024, 2, 10)]} />
  ```
</Playground>

## Применение компонента

> Данный компонент предназначен для использования на планшетах и десктопах.
> При использовании на мобильных устройствах работа компонента не гарантируется.

Данный компонент представляет собой непосредственно календарь, который необходимо встраивать в нужные части вашего приложения.

Если вам нужно поле ввода даты и времени (со всплывающим календарём), то используйте компонент [`DateRangeInput`](/components/date-range-input).

Если вам нужен компонент для выбора одиночной даты и времени, то используйте [`Calendar`](/components/calendar).

## Режим работы

Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение
React-компонентов, прочитать про это можно в [документации React](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable).

Для использования неконтролируемого режима достаточно просто _не_ передавать `value` или передавать `defaultValue`, если
требуется задать значение по умолчанию.
Для контролируемого режима используйте связку свойств `value`/`onChange` для задания значения и его изменения.

```jsx
// Неконтролируемое состояние
<CalendarRange defaultValue={[new Date(2024, 2, 1), new Date(2024, 2, 10)]} />;

// Контролируемое состояние
const [date, setDate] = React.useState([new Date(2024, 2, 1), new Date(2024, 2, 10)]);

<CalendarRange value={date} onChange={setDate} />;
```

## Локализация

Компонент поддерживает настройку текстов через `changeMonthLabel`, `changeYearLabel` и остальные `*Label` свойства.

> Название месяцев и дней недели определяется исходя из значения `locale` в `ConfigProvider`.

## Тестирование (e2e) [#e2e]

Для тестирования компонента доступны следующие data-атрибуты:

```jsx
<CalendarRange
  dayTestId={(day) => format(day, 'dd.MM.yyyy')}
  leftPartHeaderTestsData={{
    monthDropdownTestId: 'left-month-dropdown',
  }}
  rightPartHeaderTestsData={{
    monthDropdownTestId: 'right-month-dropdown',
  }}
/>
```

## Доступность (a11y) [#a11y]

Компонент обеспечивает базовую доступность через:

- корректную семантическую разметку;
- поддержку клавиатурной навигации;
- `aria`-атрибуты для всех интерактивных элементов.

При использовании компонента убедитесь, что все текстовые метки
(`changeMonthLabel`, `changeYearLabel` и остальные `*Label` свойства) корректно описывают действия для пользователей скринридеров.

## Свойства и методы [#api]

<PropsTable name="CalendarRange" />
